<template>
    <div>
        <el-badge :value="200" :max="99" @click="dialogFormVisible = true">
            <el-button size="mini" icon="el-icon-message" @click="dialogFormVisible = true"></el-button>
        </el-badge>
        <el-dialog :visible.sync="dialogFormVisible" center>
            <el-card class="reply">
                不知道不知道不知道不知道不知道不知道不知道不知道不知道不知道不知道不知道不知道不知道
            </el-card>
            <div class="bottom-container">
                <div v-if="false">
                    <div v-if="true">
                        <el-button size="mini">回复</el-button>
                    </div>
                    <div v-else>
                        <el-input
                                type="textarea"
                                :autosize="{ minRows: 2, maxRows: 4}"
                                placeholder="请输入内容"
                                v-model="textarea2">
                        </el-input>
                        <div slot="footer" class="dialog-footer" style="margin-top: 2rem">
                            <el-button size="mini" @click="dialogFormVisible = false">取 消</el-button>
                            <el-button size="mini" type="primary" @click="dialogFormVisible = false">确 定</el-button>
                        </div>
                    </div>
                </div>
                <el-card class="reply reply-answer" v-else>
                    <span>
                        噢噢噢噢噢噢噢噢噢噢噢噢噢噢噢噢哦哦哦
                    </span>
                </el-card>
            </div>
        </el-dialog>
    </div>
</template>

<script>
    export default {
        name: "ReplyDialog",
        data(){
            return {
                dialogFormVisible: false,
                textarea2: "",
            }
        }
    }
</script>

<style scoped>
    .bottom-container{
        margin-top: 2rem;
        text-align: right;
    }
    .reply{
        line-height:3rem;
    }
    .reply-answer{
        background:#409EFF;
        color: white;
        text-align: left;
    }
</style>